<!--
// 
// sidebar.vue
// 海石后台管理
// 
// 2024/11/20.
// 
-->
<template>
    <div class="sidebar" :style="{transform: `translateX(${sidebarCollapsed ? -270 : 0}px)`}">
        <Logo/>
        <el-menu :default-active="currentActive" :default-openeds="['0']" class="side-menu">
            <template v-for="item in menus" :key="item.id">
                <template v-if="item.isShow">
                    <template v-if="item.childrens && item.childrens.length > 0">
                        <SudMenu :menu="item" @click="menuClick" />
                    </template>
                    <template v-else>
                        <el-menu-item :index="`${item.id}`" @click="menuClick(item)">
                            <b-icon v-if="item.icon" :name="item.icon" size="16" style="padding-left: 4px;padding-right: 10px;" />
                            <div v-else style="display: inline-flex;width: 10px"></div>
                            <template #title>{{ item.name }}</template>
                        </el-menu-item>
                    </template>
                </template>
            </template>
        </el-menu>
    </div>
    <div v-if="!sidebarCollapsed" class="sidebar-cover" @click="closeSidebar"></div>
</template>

<script setup>
import {reactive, ref, computed} from "vue";
import {useStore} from "vuex";
import SudMenu from "@/layouts/pc/components/sub-menu.vue";
import {useRouter, useRoute} from "vue-router";
import Logo from "@/layouts/pc/components/logo.vue"

const store = useStore();
const router = useRouter();
// 当前路由
const route = useRoute();

// 菜单自定义样式配置
const styleConfig = {
    // activeTextColor: "#ffd04b",
    backgroundColor: "rgba(30, 31, 51, 1)",
    // backgroundColor: "#00102a",
    textColor: "#fff",
};

// 侧边栏折叠状态
const sidebarCollapsed = computed(() => store.getters.sidebarCollapsed);
// 菜单
const menus = computed(() => store.getters.sideMenus);
// 全部菜单
const allMenus = computed(() => store.getters.allMenus)

// 当前页面组件名
const activePageComponentName = computed(() => store.getters.activePageComponentName);
// 当前页面
const currentActive = computed(() => {
    const item = allMenus.value.find(item => item.path === route.query.page && item.name === route.query.titleName)
    if (item) {
        return item.id + ""
    }
    return "";
})

// 点击折叠按钮
function closeSidebar() {
    store.dispatch("sidebarCollapsed", true);
}

// 点击菜单
function menuClick(menu) {
    // console.log("点击菜单: ", menu);
    if (menu.type == 1) {
        switch (menu.openType) {
            case 1: // 普通页面菜单
                // 工作台单独处理
                // window.open(`#/?page=${menu.path}&titleName=${menu.name}`)
                router.push(`/?page=${menu.path}&titleName=${menu.name}`)
                break;
            case 2: // 内链
                window.open(`#/?page=/Linker&titleName=${menu.name}&only=1&link=${encodeURIComponent(menu.link)}`)
                break;
            case 3: // 外链
                window.open(menu.link)
                break;
            default:
                break;
        }
        store.dispatch("sidebarCollapsed", true);
        return;
    }
    console.log("点击了非页面菜单", menu)
}
</script>

<style lang="scss">

// 背景色
$side-background-color: rgb(50, 50, 50);
// 子菜单背景色
$side-sub-background-color: rgba(39, 39, 39, 1);
.sidebar-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;

}
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    box-shadow: 10px 0 10px 0 rgba(0, 0, 0, 0.2);
    z-index: 1001;
    transition: transform 0.3s ease;

    .side-menu {
        height: 100vh;
        overflow-y: auto;
        padding-top: 50px;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .side-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .el-menu {
        border-right: none;
        background: $side-background-color;

        .el-menu-item {
            height: 50px;
            line-height: 50px;
            color: rgba(255, 255, 255, .8);

            &:hover {
                background-color: unset;
                color: #fff;
            }
        }

        .el-sub-menu__title {
            height: 50px;
            line-height: 50px;
            color: rgba(255, 255, 255, .8);

            &:hover {
                background-color: unset;
                color: #fff;
            }

        }

    }

    .el-sub-menu {
        .el-menu {
            background-color: $side-sub-background-color;
            box-shadow: inset 0 0 10px -2px rgba(0, 0, 0, 0.2);
        }

        .is-active {
            background-color: var(--el-menu-active-color);
            color: #fff;

            &:hover {
                background-color: var(--el-menu-active-color);
                color: #fff;
            }
        }
    }

    .is-opened {
        .el-sub-menu__title {
            height: 50px;
            line-height: 50px;
            color: #fff;
        }
    }
}

.el-menu--popup {
    background-color: $side-background-color;

    .el-menu-item {
        height: 46px;
        line-height: 46px;
        color: rgba(255, 255, 255, .8);

        &:hover {
            background-color: unset;
            color: #fff;
        }
    }

    .el-sub-menu__title {
        height: 50px;
        line-height: 50px;
        color: rgba(255, 255, 255, .8);

        &:hover {
            background-color: unset;
            color: #fff;
        }

    }

    .is-active {
        background-color: var(--el-menu-active-color);
        color: #fff;

        &:hover {
            background-color: var(--el-menu-active-color);
            color: #fff;
        }
    }
}
</style>